<!-- components/EmptyState/EmptyState.vue -->
<!-- UniApp 缺省页状态组件 -->
<template>
	<view class="empty-state" :style="{ backgroundColor: bgColor }">
		<!-- 图标区域 -->
		<view class="icon-wrapper">
			<slot name="icon">
				<image v-if="icon" :src="icon" class="icon" mode="aspectFit" />
			</slot>
		</view>

		<!-- 文案区域 -->
		<view class="text-wrapper">
			<text class="title">{{ title }}</text>
			<text class="desc">{{ desc }}</text>
		</view>

		<!-- 操作区域 -->
		<view v-if="$slots.action || showRetry" class="action-wrapper">
			<slot name="action">
				<button v-if="showRetry" class="retry-btn" @click="$emit('retry')">
					{{ retryText }}
				</button>
			</slot>
		</view>
	</view>
</template>

<script>
export default {
	name: 'EmptyState',
	props: {
		// 类型 preset: 'data' | 'network' | 'auth' | 'search' | 'custom'
		type: {
			type: String,
			default: 'data',
		},
		// 背景颜色
		bgColor: {
			type: String,
			default: '#f8f8f8',
		},
		// 自定义图标路径
		icon: {
			type: String,
			default: 'https://web-assets.dcloud.net.cn/unidoc/zh/logo.svg',
		},
		// 标题
		title: {
			type: String,
			default: '',
		},
		// 描述
		desc: {
			type: String,
			default: '',
		},
		// 是否显示重试按钮
		showRetry: {
			type: Boolean,
			default: false,
		},
		// 重试按钮文字
		retryText: {
			type: String,
			default: '重新加载',
		},
	},
	computed: {
		// 默认图标和文案映射
		presets() {
			return {
				data: {
					icon: 'https://web-assets.dcloud.net.cn/unidoc/zh/logo.svg',
					title: '暂无数据',
					desc: '当前列表为空',
				},
				network: {
					icon: 'https://web-assets.dcloud.net.cn/unidoc/zh/logo.svg',
					title: '网络连接失败',
					desc: '请检查网络设置后重试',
				},
				auth: {
					icon: 'https://web-assets.dcloud.net.cn/unidoc/zh/logo.svg',
					title: '暂无权限',
					desc: '您没有访问该内容的权限',
				},
				search: {
					icon: 'https://web-assets.dcloud.net.cn/unidoc/zh/logo.svg',
					title: '未找到相关结果',
					desc: '换个关键词试试吧',
				},
			};
		},

		// 当前类型的预设项
		presetItem() {
			return this.presets[this.type] || this.presets.data;
		},

		// 安全地合并 prop 和预设值
		displayIcon() {
			return this.icon || this.presetItem.icon;
		},

		displayTitle() {
			return this.title || this.presetItem.title;
		},

		displayDesc() {
			return this.desc || this.presetItem.desc;
		},
	},
};
</script>

<style scoped>
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	min-height: 300px;
}

.icon-wrapper {
	margin-bottom: 16px;
}

.icon {
	width: 120px;
	height: 120px;
}

.text-wrapper {
	text-align: center;
	margin-bottom: 24px;
}

.title {
	font-size: 16px;
	color: #333;
	margin-bottom: 8px;
	font-weight: 500;
}

.desc {
	font-size: 14px;
	color: #999;
}

.action-wrapper {
	width: 100%;
	max-width: 200px;
}

.retry-btn {
	width: 100%;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	color: #fff;
	background-color: #007aff;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 122, 255, 0.2);
}
</style>